<template>
    <div class="ff-rate" :class="model">
        <input type="hidden" :name="name" :value="clickCount">
        <div v-if="showHead" class="rate-head" :title="head">
            <slot name="head">{{ head }}</slot>
        </div>
        <div class="rate-body"
             :style="'width:' + sum * (iconSize + 4) + 'px;height:' + iconSize +'px;line-height:'+ iconSize + 'px'"
             @mouseleave="handleMouseleave"
        >
            <div class="back">
                <span
                    v-for="s in sum"
                    :key="s"
                    class="iconfont icon-pingjia_huaban rate-icon rate-back"
                    @mouseenter.stop="handleMouseenter($event, s, true)"
                    @click="handleClick(s)"
                >
                </span>
            </div>
            <div class="color">
                <span
                    v-for="c in parseInt(currentCount)"
                    :key="c"
                    class="iconfont icon-pingjia_huaban rate-icon rate-item"
                    @mouseenter.stop="handleMouseenter($event, c)"
                    @click="handleClick(c)"
                >
                </span>
                <span
                    class="iconfont icon-pingjia_huaban rate-icon rate-item"
                    v-if="currentCount > parseInt(currentCount)"
                    @mouseenter.stop="handleMouseenter($event, parseInt(currentCount)+1)"
                    :style="'width:' + (currentCount-parseInt(currentCount))*iconSize + 'px'"
                ></span>
            </div>
        </div>
        <div v-if="showText" class="rate-tail">
            <slot name="text">
                <span :class="currentCount===0? 'text-grey' : 'text-red'">{{ currentCount }} 分</span>
            </slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'FfRate',
        props: {
            model: {
                type: String,
                default: 'normal' //mini/normal
            },
            sum: {//星星总颗数
                type: Number,
                default: 5
            },
            count: {//点亮星星颗数
                type: Number,
                default: 0
            },
            showHead: {//前置标题是否显示
                type: Boolean,
                default: false,
            },
            head: {//前置标题
                type: String,
                default: "",
            },
            showText: {//显示分数
                type: Boolean,
                default: false
            },
            disabled: {//是否可以选择
                type: Boolean,
                default: false
            },
            name: {
                type: String
            }
        },
        data() {
            return {
                hoverCount: -1,
                isHover: false,
//        currentCount: this.count,
                clickCount: this.count,
                tips: ['非常不满意','不满意','一般','满意','非常满意']
            }
        },
        computed: {
            currentCount: function () {
                const _self = this;
                let c;
                if(_self.isHover) c = _self.hoverCount;
                else c = _self.clickCount;
                return c
            },
            iconSize: function () {
                if(this.model === "normal") return 14;
                else if(this.model === "mini") return 12;
                return 12
            },
        },
        watch: {
            count(value) {
                this.clickCount = value;
                this.$emit('input', value);
            },
        },
        methods: {

            handleMouseenter(e, value, status) {
                if(this.disabled) return;
                this.isHover = true;
                this.hoverCount = value;
                if(status)return;
                this.$addRate(e, this.tips[value - 1], value);
            },

            handleMouseleave(){
                if(this.disabled) return;

                this.isHover = false;
                this.hoverCount = -1;
                this.$removeRate();
            },

            handleClick(value) {
                if(this.disabled) return;

                this.isHover = false;
                this.clickCount = value;
//        console.log(this.clickCount);
                this.$emit('input', value);
                this.$emit('on-change', value);
            },
        }
    }
</script>
<style lang="less">
    @red: #E80000;
    @font-grey: #868686;
    .ff-rate {
        .rate-head {
            max-width: 48px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 10px;
        }
        .rate-body {
            display: inline-block;
            position: relative;
            .back{
                position: absolute;
                display: inline-flex;
            }
            .color{
                position: absolute;
                display: inline-flex;
            }
            .rate-icon{
                display: inline-flex;
                &.rate-back{
                    color: #DDDDDD;
                }
                &.rate-item{
                    color: #F7C500;
                    overflow: hidden;
                }
            }
        }
        .rate-tail {
            .text-red {
                color: @red;
            }
            .text-grey {
                color: @font-grey;
            }
        }
        &.normal {
            @size: 14px;
            .rate-icon{
                height: @size;
                width: @size;
                font-size: @size;
                margin-right: 4px;
            }
        }
        &.mini {
            @size: 12px;
            .rate-icon{
                height: @size;
                width: @size;
                font-size: @size;
                margin-right: 2px;
            }
        }
    }
    .ff-rate-tip-in-body {
        position: absolute;
        background-color: #fff;
        border: 1px solid #999;
        color: #666;
        border-radius: 4px;
        padding: 1px 6px;
    }
</style>
